<script setup lang="ts">
import {computed, onBeforeMount, onMounted, ref, watch} from "vue";
import {useAppConfigStore} from "@/store/system/appConfigStore";
import {LikeOutlined, LikeTwoTone, DislikeOutlined, DislikeTwoTone} from '@ant-design/icons-vue'
import _ from "lodash";
import {addPraise, addTread, cancelPraise, cancelTread, getPraiseCount} from "@/api/praise/praise";
import {ECode} from "@/util/commonUtil";
import {userConfigStore} from "@/store/user/userConfigStore";
import {message} from "ant-design-vue";
import {loginConfigStore} from "@/store/user/loginConfigStore";
import {useSysEventStore} from "@/store/system/SysEventStore";
import {v4 as uuidV4} from 'uuid';

// 定义 PraiseProps 类型
interface PraiseProps {
  bizUid: string;
  resourceType: string;
  isPraiseValue: boolean;
  praiseCountValue: number;
  isTreadValue: boolean;
  treadCountValue: number;
}

const props = defineProps<PraiseProps>();
let componentShowMap = computed(() => useAppConfigStore().componentShowMap)
const praiseCount = ref<number>(0)
const isPraise = ref<boolean>(false)
const treadCount = ref<number>(0)
const isTread = ref<boolean>(false)
const emit = defineEmits(['praiseCallback', 'cancelPraiseCallback']);

onBeforeMount(() => {
  getUserPraiseCount()
})

onMounted(() => {
  getComponentShowMap()
})

watch(() => props.bizUid, () => {
  getUserPraiseCount()
})
watch(() => useAppConfigStore().componentShowMap, () => {
  getComponentShowMap()
})

function getComponentShowMap() {
  componentShowMap = computed(() => useAppConfigStore().componentShowMap)
}

function getUserPraiseCount() {
  if (!props.bizUid) {
    return
  }
  // 有值直接返回
  if (!_.isUndefined(props.praiseCountValue) && !_.isUndefined(props.treadCountValue)) {
    isPraise.value = props.isPraiseValue
    isTread.value = props.isTreadValue
    praiseCount.value = props.praiseCountValue
    treadCount.value = props.treadCountValue
    return
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  getPraiseCount(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      let praiseMap = response.data
      isPraise.value = praiseMap.isPraise
      isTread.value = praiseMap.isTread
      praiseCount.value = praiseMap.praiseCount
      treadCount.value = praiseMap.treadCount
    }
  })
}

function praise() {
  const isLogin = computed(() => userConfigStore().isLogin)
  if (!isLogin.value) {
    message.warning('登录后才可以操作~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(Math.random())
    return
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  addPraise(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isPraise.value = true
      praiseCount.value = praiseCount.value + 1
      // 点赞回调
      emit('praiseCallback', props.bizUid)
      useSysEventStore().setPraiseMessage(uuidV4())
    } else {
      message.warning(response.message)
    }
  })
}

function cancelUserPraise() {
  const isLogin = computed(() => userConfigStore().isLogin)
  if (!isLogin.value) {
    message.warning('登录后才可以操作~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(Math.random())
    return
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  cancelPraise(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isPraise.value = false
      praiseCount.value = praiseCount.value - 1
      // 取消点赞回调
      emit('cancelPraiseCallback', props.bizUid)
      useSysEventStore().setPraiseMessage(uuidV4())
    } else {
      message.warning(response.message)
    }
  })
}

function tread() {
  const isLogin = computed(() => userConfigStore().isLogin)
  if (!isLogin.value) {
    message.warning('登录后才可以操作~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(Math.random())
    return
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  addTread(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isTread.value = true
      treadCount.value = treadCount.value + 1
      useSysEventStore().setPraiseMessage(uuidV4())
    } else {
      message.warning(response.message)
    }
  })
}

function cancelUserTread() {
  const isLogin = computed(() => userConfigStore().isLogin)
  if (!isLogin.value) {
    message.warning('登录后才可以操作~')
    // 未登录，自动弹出登录框
    loginConfigStore().setLoginMessage(Math.random())
    return
  }
  let params: any = {}
  params.resourceUid = props.bizUid
  params.resourceType = props.resourceType
  cancelTread(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.message)
      isTread.value = false
      treadCount.value = treadCount.value - 1
      useSysEventStore().setPraiseMessage(uuidV4())
    } else {
      message.warning(response.message)
    }
  })
}
</script>

<template>
  <div class="PraiseAndTread flex flex-row gap-2">
    <!-- 点赞 -->
    <div class="Praise iconColor" v-if="componentShowMap.showUserPrise">
      <i class="list-none cursor-pointer not-italic" v-if="!isPraise||praiseCount===0" @click="praise">
        <LikeOutlined/>
        <span v-if="praiseCount>0" class="not-italic ml-1">{{ praiseCount }}</span>
      </i>
      <i class="list-none cursor-pointer not-italic" v-else @click="cancelUserPraise">
        <LikeTwoTone/>
        <span class="not-italic ml-1">{{ praiseCount }}</span>
      </i>
    </div>
    <!-- 点踩 -->
    <div class="Tread iconColor" v-if="componentShowMap.showUserTread">
      <i class="list-none cursor-pointer" v-if="!isTread||treadCount===0" @click="tread">
        <DislikeOutlined/>
        <span v-if="treadCount>0">{{ treadCount }}</span>
      </i>
      <i class="list-none cursor-pointer" v-else @click="cancelUserTread">
        <DislikeTwoTone/>
        <span class="not-italic ml-1">{{ treadCount }}</span>
      </i>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>
